<template>
  <div class="cron-day-week-box">
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        label="1"
      >
        {{ dayText.every }}
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        label="0"
      >
        {{ dayText.doNotSpecify }}
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        label="2"
      >
        {{ dayText.intervalDay[0] }}
        <el-input-number
          v-model="selectData.incrementIncrement"
          size="small"
          :min="1"
          :max="31"
        />
        {{ dayText.intervalDay[1] }}
        <el-input-number
          v-model="selectData.incrementStart"
          size="small"
          :min="1"
          :max="31"
        />
        {{ dayText.intervalDay[2] }}
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
              v-model="selectData.radioType"
              label="8"
      >
        {{ dayText.cycle[0] }}
        <el-input-number
                v-model="selectData.rangeStart"
                size="small"
                :min="1"
                :max="31"
        />
        {{ dayText.cycle[1] }}
        <el-input-number
                v-model="selectData.rangeEnd"
                size="small"
                :min="2"
                :max="31"
        />
        {{ dayText.cycle[2] }}
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        class="long"
        label="3"
      >
        {{ dayText.specificDay }}
        <el-select
          v-model="selectData.specificSpecific"
          size="small"
          multiple
          @change="specificSpecificSort"
          @visible-change="optionShow"
        >
          <el-option
            v-for="val in 31"
            :key="val"
            :value="val"
          >
            {{ val }}
          </el-option>
        </el-select>
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        label="4"
      >
        {{ dayText.lastDay }}
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        label="5"
      >
        {{ dayText.lastWeekday }}
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        label="6"
      >
        <el-input-number
          v-model="selectData.cronDaysBeforeEomMinus"
          size="small"
          :min="1"
          :max="31"
        />
        {{ dayText.beforeEndMonth[0] }}
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        label="7"
      >
        {{ dayText.nearestWeekday[0] }}
        <el-input-number
          v-model="selectData.cronDaysNearestWeekday"
          size="small"
          :min="1"
          :max="31"
        />
        {{ dayText.nearestWeekday[1] }}
      </el-radio>
    </el-row>
  </div>
</template>

<script>
  import mixin from './mixins'
  export default {
    mixins: [mixin],
    props: {
      // 设置回显的参数
      displayData: {
        type: String,
        default() {
          return ''
        }
      }
    },
    data(){
      return {
        dayText: {
          every: "每一天",
          doNotSpecify: "不指定",
          intervalDay: ["每隔", "天执行 从", "天开始"],
          specificDay: "具体天数(可多选)",
          lastDay: "在这个月的最后一天",
          lastWeekday: "在这个月的最后一个工作日",
          beforeEndMonth: ["在本月底前", "天"],
          nearestWeekday: ["最近的工作日（周一至周五）至本月", "日"],
          cycle: ["周期从", "到", "日的每一日"]
        },
        selectData:{
          radioType:'1', // 0不指定，1通配，2每隔,3指点具体，4最后一天，5最后一个工作日, 6本月底前，7最近工作日
          incrementStart:'1',
          incrementIncrement:'1',
          specificSpecific:[1],
          cronDaysBeforeEomMinus:'',
          cronDaysNearestWeekday:'',
          rangeStart:'', // 从多少开始
          rangeEnd:'', // 到多少结束
        },
      }
    },
    computed: {
      // 计算显示
      dataText() {
        let days = '';
        let type = this.selectData.radioType;
        switch (type.toString()){
          case '0':
            days = '?';
            break;
          case '1':
            days = '*';
            break;
          case '2':
            days = this.selectData.incrementStart+'/'+this.selectData.incrementIncrement;
            break;
          case '3':
            days = this.selectData.specificSpecific.join(",")
            break;
          case '4':
            days = "L";
            break;
          case '5':
            days = 'LW';
            break;
          case '6':
            days = 'L-' + this.selectData.cronDaysBeforeEomMinus;
            break;
          case '7':
            days = this.selectData.cronDaysNearestWeekday+"W";
            break;
          case '8':
            days = this.selectData.rangeStart+"-"+this.selectData.rangeEnd;
            break;
          default:
            if(this.displayData) {
              days = this.displayData;
            }
        }
        return days;
      },
    },
    watch: {
      "displayData": {
        handler(){
          this.displayDataChange();
        },
        deep:true
      },
      dataText:{
        handler(newVal){
          this.$emit('change', newVal, 'day')
        },
        deep:true
      }
    },
    created() {
      this.displayDataChange();
    },
    methods: {
      displayDataChange() {
        let regOne=/^[L][-][0-9]*$/; // 判断L-1
        let regTwo=/^[0-9]*[W]$/; // 判断1W
        let arr = [];
        if(this.displayData) {
          let d = this.displayData;
          if(d === "*") {
            this.selectData.radioType = '1';
          }else if(d === "?") {
            this.selectData.radioType = '0';
          }else if(d.indexOf('/') !== -1) {
            arr = this.displayData.split('/');
            this.selectData.incrementStart = arr[0]; //从多少开始
            this.selectData.incrementIncrement = arr[1]; // 间隔
            this.selectData.radioType = '2'
          }else if(this.checkNum(d)) {
            this.selectData.specificSpecific = [d];
            this.selectData.radioType = '3'
          }else if(d.indexOf(',') !== -1) {
            arr = this.displayData.split(',');
            for(let i = 0; i < arr.length; i++) {
              if(arr.indexOf(arr[i])!==arr.lastIndexOf(arr[i])){
                console.log("day回显参数错误")
                return
              }
            }
            this.selectData.specificSpecific = arr;
            this.selectData.radioType = '3'
          }else if(d === "L") {
            this.selectData.radioType = '4'
          }else if(d === "LW") {
            this.selectData.radioType = '5'
          }else if(regOne.test(d)) {
            arr = this.displayData.split('-');
            this.selectData.cronDaysBeforeEomMinus = arr[1];
            this.selectData.radioType = '6'
          }else if(regTwo.test(d)) {
            this.selectData.radioType = '7'
          } else if(d.indexOf('-') !== -1) {
            arr = this.displayData.split('-');
            this.selectData.rangeStart = arr[0]; // 从多少开始
            this.selectData.rangeEnd = arr[1]; // 到多少结束
            this.selectData.radioType = '8';
          }else{
            this.selectData.radioType = "null";
          }
        }
      },
      // 下拉框改变时
      specificSpecificSort() {
        this.selectData.specificSpecific.sort((a,b) => { return a-b; });
      },
      // 显示下拉框的options
      optionShow(boolean) {
        if(boolean) {
          this.selectData.radioType = "3";
        }
      }
    }
  }
</script>

<style scoped>
  .cron-day-week-box .el-row {
    margin: 10px 0;
  }
  .cron-day-week-box .el-row .long .el-select {
    width: 350px;
  }
  .cron-day-week-box .el-row .el-input-number {
    width: 110px;
  }
</style>